<!DOCTYPE html>
<html>
<head>
<title>Hoverboard WebUI 0.1</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="jwplayer.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">

<style type="text/css">


BODY {
   background-image: url("hoverGUI.png");
   background-repeat: no-repeat;
   background-color:black;
}

#move{
position:absolute;
left:75px;
top:100px;
height:500px;
}

#rotate{
position:absolute;
left:950px;
top:100px;
height:500px;
}
#objectDist{
   position:absolute;
   left:20px;
   top:35px;
   color:#66A7F2;
   font-weight:bold;
}

#lift{
   position:absolute;
   left:300px;
   top:598px;
}

#hold{
   position:absolute;
   left:150px;
   top:598px;
}

#currCommand{
   position:absolute;
   left:724px;
   top:0px;
}

#speed{
   position:absolute;
   left:170px;
   top:35px;
   color:#66A7F2;
   font-weight:bold;
}

#direction{
   position:absolute;
   left:325px;
   top:35px;
   color:#66A7F2;
   font-weight:bold;
}


#autoPilot{
   position:absolute;
   left:724px;
   top:598px;
}

#videoStream{
   position:fixed;
   left:152px;
   top:89px;
   width:720px;
   height:510px;
   background-color=green;
}



</style>

<script type="text/javascript">

var hold = null;
var lift = null;
var leftFan = null;
var rightFan = null;
var autoPilot = null;

var objectDist = null;
var speed = null;
var currCommand = null;

var url  = "/cgi-bin/guiclient?";

function init()
{
   
  // input
  hold = document.getElementById('hold');
  lift = document.getElementById('lift);
  leftFan = document.getElementById('leftFan');
  rightFan = document.getElementById('rightFan');
  autoPilot = document.getElementById('autoPilot');
  
  // output
  objectDist = document.getElementById('objectDist');
  speed = document.getElementById('speed');
  currCommand = document.getElementById('currentCommand');
 
}




window.onload = init;

</script>

</head>
<body>
<div id="move"></div>

<div id="rotate"></div>

<div id="objectDist">

</div>

<div id="lift">
<image src="button1.gif" />
</div>

<div id="hold">
<image src="button1.gif" />
</div>

<div id="currCommand">
<image src="button1.gif" />
</div>

<div id="autoPilot">
<image src="button1.gif" />
</div>

<div id="speed">

</div>
<div id="direction">

</div>
<div id="videoStream">
Loading the player...
</div>
<script>
// Jquery
$(function() {
    startRefresh();
});

jwplayer("videoStream").setup({
	file:"http://192.168.137.83:8081/stream.flv",
	height:510,
	width:730,
	autostart:true,
	flashvars:"shownagivation=false"
});


$("#move").slider({ orientation: "vertical" });
$("#move").slider({ max: 80 });
$("#move").slider({ min: 30 });
$("#move").on( "slidechange", function( event, ui ) {
$.ajax({
    type: "GET",
    url: "cgi-bin/handler.cgi",
    data: {move: ui.value},
    error: function(result) {
        var data_received = $(result).find("h1");
        alert(data_received );
    },
    success: function(result) {
        //alert(result);
    }
});
});

$("#rotate").slider({ orientation: "vertical" });
$("#rotate").slider({ max: 100 });
$("#rotate").slider( "value", 50 );
$("#rotate").on( "slidechange", function( event, ui ) {
$.ajax({
    type: "GET",
    url: "cgi-bin/handler.cgi",
    data: {rotate: ui.value},
    error: function(result) {
        var data_received = $(result).find("h1");
        alert(data_received );
    },
    success: function(result) {
       // alert(result);
    }
});
});

$("#lift").on('click', function(event) {
$.ajax({
    type: "GET",
    url: "cgi-bin/handler.cgi",
    data: {lift: 1},
    error: function(result) {
        var data_received = $(result).find("h1");
        alert(data_received );
    },
    success: function(result) {
        //alert(result);
    }
});
});





$("#hold").on('click', function(event) {
$.ajax({
    type: "GET",
    url: "cgi-bin/handler.cgi",
    data: {hold: 1},
    error: function(result) {
        var data_received = $(result).find("h1");
        alert(data_received );
    },
    success: function(result) {
        //alert(result);
    }
});
});


$("#autoPilot").on('click', function(event) {
$.ajax({
    type: "GET",
    url: "cgi-bin/handler.cgi",
    data: {autoPilot: 1},
    error: function(result) {
        var data_received = $(result).find("h1");
        alert(data_received );
    },
    success: function(result) {
        //alert(result);
    }
});
});



function startRefresh() {
    setTimeout(startRefresh,1000);
$.ajax({
    type: "GET",
    url: "cgi-bin/WebDataIn.cgi",
    data: {autoPilot: 1},
    error: function(result) {
        var data_received = $(result).find("h1");
        alert(data_received );
    },
    success: function(result) {
        var anchor = document.getElementsByTagName('div');
	var data = result.split('\n');
	anchor[2].innerHTML = data[2];
	anchor[7].innerHTML = data[1];
	anchor[8].innerHTML = data[3];
    }
});
}
</script>
